<template>
  <div>
    <yd-cell-group>
      <yd-cell-item>
        <span slot="left" class="ts">邮箱</span>
        <input
          slot="right"
          type="text"
          regex="email"
          v-model="request_data.email"
          placeholder="请输入邮箱"
          style="text-align:right"
        />
      </yd-cell-item>
      <yd-cell-item>
        <span slot="left" class="ts">手机号</span>
        <input
          slot="right"
          type="text"
          regex="mobile"
          v-model="request_data.phone"
          placeholder="请输入手机号"
          style="text-align:right"
        />
      </yd-cell-item>
    </yd-cell-group>
    <yd-cell-group>
      <yd-cell-item>
        <span slot="left" class="ts">微信号</span>
        <input
          slot="right"
          type="text"
          v-model="request_data.wxNo"
          placeholder="请输入微信号"
          style="text-align:right"
          @blur="blurin"
        />
      </yd-cell-item>
    </yd-cell-group>
    <yd-cell-group>
      <yd-cell-item>
        <span slot="left" class="ts">活动地域</span>
        <input
          slot="right"
          type="text"
          v-model="request_data.address"
          placeholder="请输入活动区域"
          style="text-align:right"
          @blur="blurin"
        />
      </yd-cell-item>
    </yd-cell-group>
    <yd-cell-group title="生活爱好">
      <yd-cell-item>
        <yd-textarea
          slot="right"
          v-model="request_data.content"
          placeholder="请输入您的生活爱好"
          maxlength="100"
          @focus="getFocus"
        ></yd-textarea>
      </yd-cell-item>
    </yd-cell-group>
    <div class="explain">
      <div class="ex">
        <span>申请说明</span>
      </div>
      <div>
        <span>
          探店官即为本公司旗下app“嗨fun”的一个用户拓展线下店铺上线的分享返佣金角色，注册成为探店官审核通过后即为app的兼职线下市场拓展营销人员，
          邀请店铺上线至app内，分享app内所探店铺产品至自己的微信，QQ等社交软件内，用户通过探店官的分享后消费，
          探店官即可获得按公司统一（不低于百分之20%）的探店官返佣比例的佣金（此比例高于分享达人5%），
          可留在app内进行直接消费也可以提现至个人账户。
        </span>
      </div>
    </div>
    <div class="btn">
      <yd-button size="large" type="primary" @click.native="save_data">提交申请</yd-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "agentfor",
  data() {
    return {
      request_data: {
        userId:28,
        email: "",
        phone: '',
        wxNo: "",
        address: "",
        content: ""
      }
    };
  },
  computed: {
    scrollHeight() {
      return document.documentElement.scrollTop || document.body.scrollTop || 0;
    }
  },
  methods: {
    blurin() {
      window.scrollTo(0, Math.max(this.scrollHeight - 1, 0));
    },
    getFocus() {
      $("input,textarea").on("blur", function() {
        window.scroll(0, 0);
      });
    },

    /*
     * 保存探店官的数据
     * 作者：gzt
     * 时间：2019-11-29 15:18:14
     */
    save_data() {
        let _this=this
        const regei = /^\w+\@+[0-9a-zA-Z]+\.(com|com.cn|edu|hk|cn|net)$/;
        const regph = /^1[345789]\d{9}$/;
        // 非空验证,正则
        // 邮箱
        if(this.request_data.email==''){
          this.$dialog.toast({
                mes: '邮箱不能为空',
                timeout: 1500,
                icon: 'error',
            });
              return false;
        }else{
            if(!(regei.test(this.request_data.email))){
            this.$dialog.toast({
                  mes: '邮箱格式不正确',
                  timeout: 1500,
                  icon: 'error',
              });
              return false;
            }
        }
        // 手机号
        if(this.request_data.phone==''){
          this.$dialog.toast({
                mes: '手机号不能为空',
                timeout: 1500,
                icon: 'error',
            });
              return false;
        }else{
            if(!(regph.test(this.request_data.phone))){
            this.$dialog.toast({
                  mes: '手机号格式不正确',
                  timeout: 1500,
                  icon: 'error',
              });
              return false;
            }
        }
        this.$post(this.$api.account.shop_manager_apply, this.request_data)
        .then(res => {
          console.log(res)
        if (res.success) {
          _this.$router.push('agentshop')
        }else{
           _this.$dialog.toast({
                mes: '提交失败，请稍后再试！',
                timeout: 1500,
                icon: 'error',
            });
           }
        }).catch(res=>{
        this.$dialog.toast({
              mes: '系统异常！',
              timeout: 1500,
              icon: 'error',
          });
       });
    }
  }
};
</script>
<style scoped>
.ty {
  border-bottom: 1px solid #f5f5f5;
}
.ts {
  font-size: 0.3rem;
}
.btn {
  position: absolute;
  bottom: 0;
  height: 1.6rem;
  width: 100%;
  padding: 0.1rem 0.1rem;
}
.yd-btn-block {
  font-size: 0.35rem;
}
.explain {
  padding: 0.2rem 0.24rem;
  text-align: left;
  font-size: 0.28rem;
  margin-bottom: 1.5rem;
}
.ex {
  font-size: 0.32rem;
  font-weight: bold;
  padding-bottom: 0.2rem;
}
.explain span {
  line-height: 0.3rem;
  font-family: 微软雅黑;
}
</style>
